<template>
  <div class="demo">
    <div class="demo-title">查询模式 - 确定类目</div>
    <div class="demo-content">
      <AutoComplete
        v-model:value="value"
        class="certain-category-search"
        dropdown-class-name="demo--auto-complete"
        :dropdown-match-select-width="500"
        style="width: 250px"
        :options="dataSource"
      >
        <template #option="item">
          <template v-if="item.options">
            <span>
              {{ item.value }}
              <a style="float: right" :href="searchUrl" target="_blank" rel="noopener noreferrer">
                more
              </a>
            </span>
          </template>
          <template v-else-if="item.value === 'all'">
            <a href="searchUrl" target="_blank" rel="noopener noreferrer"> View all results </a>
          </template>
          <template v-else>
            <div style="display: flex; justify-content: space-between">
              {{ item.value }}
              <span>
                <UserOutlined />
                {{ item.count }}
              </span>
            </div>
          </template>
        </template>
        <Input.Search placeholder="input here" size="large"></Input.Search>
      </AutoComplete>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { UserOutlined } from '@ant-design/icons-vue';
  import { Input } from '@sscd/input';
  import AutoComplete from '@sscd/auto-complete';
  const dataSource = [
    {
      value: 'Libraries',
      options: [
        { value: 'SSC+ Design Web', count: 10000 },
        { value: 'SSC+ Design Mobile', count: 10600 },
      ],
    },
    {
      value: 'Solutions',
      options: [
        { value: 'SSC+ Design Web', count: 60100 },
        { value: 'SSC+ Design Mobile', count: 30010 },
      ],
    },
    {
      value: 'Articles',
      options: [{ value: 'SSC+ Design Web', count: 100000 }],
    },
    {
      value: 'all',
    },
  ];
  const value = ref('');
  const searchUrl = 'https://www.baidu.com/search?q=sscd';
</script>
